<template>
  <view>
    <u-navbar
      is-back="true"
      back-icon-color="#f6f6f6"
      title="穿搭推荐"
      title-color="#f6f6f6"
      :background="navBackground"
    ></u-navbar>
    <!--顶部tab栏-->
    <u-tabs
      ref="tabs"
      :list="list"
      bg-color="#e2edfb"
      item-width="25%"
      active-color="#76a0d2"
      @change="tabChange"
      inactive-color="#b0b3ba"
      font-size="30"
      :current="currentIndex"
      :bold="true"
    ></u-tabs>
    <!--存放文章卡片-->
    <view>
      <u-grid :col="2">
        <block v-for="(item, index) in passageList" :key="index">
          <u-grid-item :border="false">
            <view class="passage-card" @click="navtoDetail(item.cloth_id)">
              <view class="image-box">
                <image :src="item.cloth_preImg" mode="aspectFill"></image>
              </view>
              <view class="description">
                <view class="passage-keywords">{{ item.cloth_name }}</view>
                <view class="writer-info">
                  <view style="display: flex; align-items: center">
                    <view class="writer-avatar">
                      <image :src="item.auth_avatar"></image>
                    </view>
                    <view class="writer-nickname">{{ item.auth_name }}</view>
                  </view>
                  <view
                    v-if="item.auth_id != user_id"
                    :class="
                      'iconfont ' +
                      (item.is_like ? 'icon-like' : 'icon-no-like')
                    "
                    @tap.stop="userLike(index, item.is_like, item.cloth_id)"
                    ><text class="like-count">{{ item.like_count }}</text></view
                  >
                </view>
              </view>
            </view>
          </u-grid-item>
        </block>
      </u-grid>
    </view>
  </view>
</template>

<script>
let app = getApp();
export default {
  data() {
    return {
      navBackground: app.globalData.navBackground,
      list: [
        {
          name: '推荐',
          group_id: '1',
        },
        {
          name: '最新',
          group_id: '2',
        },
        {
          name: '最热',
          group_id: '3',
        },
        {
          name: '春季',
          group_id: '4',
        },
        {
          name: '夏季',
          group_id: '5',
        },
        {
          name: '秋季',
          group_id: '6',
        },
        {
          name: '冬季',
          group_id: '7',
        },
      ],
      currentIndex: 0,
      user_id: '',
      passageList: [],
      pageIndex: 1,
      isTotal: false,
      isRefresh: false,
    };
  },
  onLoad() {
    this.loadPassageList(this.pageIndex);
  },
  onShow() {
    if (
      typeof app.globalData.user_id != 'undefined' &&
      app.globalData.user_id != null
    ) {
      this.user_id = app.globalData.user_id;
    }
  },
  onReachBottom() {
    this.pageIndex++;
    if (!this.isTotal) {
      this.loadPassageList(this.pageIndex);
    } else {
      app.showToast('没有更多了哟~');
    }
  },
  onPullDownRefresh() {
    this.isRefresh = true;
    this.pageIndex = 1;
    this.loadPassageList(this.pageIndex);
    uni.stopPullDownRefresh();
  },
  methods: {
    userLike: function (index, is_like, cloth_id) {
      if (!app.globalData.isLogin) {
        uni.showModal({
          title: '温馨提示',
          content: '检测到您还没有登录，是否前往登录？',
          success: (res) => {
            if (res.confirm) {
              uni.switchTab({
                url: '/pages/mine/mine',
              });
            }
          },
        });
        return;
      }
      uni.request({
        url: app.globalData.baseUrl + '/cloth/userLike',
        data: {
          user_id: app.globalData.user_id,
          cloth_id: cloth_id,
          token: app.globalData.token,
          is_like: is_like,
        },
        success: (res) => {
          if (!res.data.code) {
            this.passageList[index].is_like = !is_like;
            this.passageList[index].like_count += is_like ? -1 : 1;
            app.showToast(!is_like ? '点赞收到了~' : '已取消点赞~');
          } else {
            app.showToast(res.data.msg);
          }
        },
      });
    },
    loadPassageList(pageIndex = 1, limit = 10) {
      if (this.isRefresh) {
        uni.showLoading({
          title: '刷新中...',
        });
      } else {
        uni.showLoading({
          title: '加载中...',
        });
      }
      uni.request({
        url: app.globalData.baseUrl + '/cloth/getByGroup',
        method: 'GET',
        data: {
          group_id: this.list[this.currentIndex].group_id,
          user_id:
            typeof app.globalData.user_id != 'undefined'
              ? app.globalData.user_id
              : '',
          page_index: pageIndex,
          limit: limit,
        },
        success: (res) => {
          let result = res.data;
          if (!result.code) {
            if (result.isTotal) this.isTotal = true;
            for (let i = 0; i < result.clothList.length; i++) {
              this.passageList.push(result.clothList[i]);
            }
            uni.hideLoading();
            if (this.isRefresh) {
              app.showToast('刷新成功~', 'success');
              this.isRefresh = false;
            }
          } else {
            uni.hideLoading();
            app.showToast(result.msg);
          }
        },
        fail: (err) => {
          uni.hideLoading();
          app.showToast('请求失败,请稍后再试~');
          console.log('请求失败', err.errMsg);
        },
      });
    },
    tabChange(index) {
      this.currentIndex = index;
      this.passageList = [];
      this.isTotal = false;
      this.pageIndex = 1;
      this.loadPassageList(this.pageIndex);
    },
    navtoDetail(id) {
      uni.navigateTo({
        url: '/pages/cloth/details?id=' + id,
      });
    },
  },
};
</script>

<style lang="scss">
.passage-card {
  width: 90%;
  border-radius: 20rpx;
  overflow: hidden;
}

.image-box {
  width: 100%;
}

.u-border-right::after {
  border: none !important;
}

.image-box image {
  width: 100%;
}

.description {
  padding-left: 20rpx;
}

.passage-keywords {
  width: 100%;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 10rpx;
}

.writer-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.writer-avatar {
  width: 50rpx;
  height: 50rpx;
  border: 4rpx #fff solid;
  margin-top: 6rpx;
}

.writer-avatar image {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 4rpx #e6b1c7 solid;
  box-sizing: border-box;
}

.writer-nickname {
  font-size: 24rpx;
  font-weight: bold;
  margin-left: 10rpx;
  overflow: hidden;
  max-width: 180rpx;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.like-count {
  font-size: 26rpx;
  line-height: 16px;
  margin-left: 4rpx;
  color: #242424;
}
</style>
